<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="./bower_components/jquery/dist/jquery.js"></script>
</head>
<body>
<button id="test">test</button>
<button id="test2">test2</button>

<script type="text/javascript">
    window.addEventListener('hashchange',function(event){
        console.log('hashchange');
        var newUrl = event.newURL;
        var hash = newUrl.split('#!')[1];

        /**
         *  在hashchange中再次pushstate会造成后push的url到url中
         *但是不会造成再次出发hashchange ，同时如果是回退草成hashchange的前进按钮不亮
         */
        history.pushState(null,null,"#!123");
    },false);

    /*$(window).on('hashchange',function(event){
        console.log('hashchange event');
    });*/


    document.querySelector('#test').addEventListener('click',function(){
        history.pushState(null,null,"#!/pages/page/1");
    });

    document.querySelector('#test2').addEventListener('click',function(){
        history.pushState(null,null,"#!/pages/page/2");
    });
</script>
</body>
</html>